<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <div id="app"></div>
<body>

    <script>
        function flatten(children) {
          return Array.prototype.concat.apply([], children);
        }

        function v(tag, props, ...children) {
          return {
            tag,
            props: props || {},
            children: flatten(children) || [],
          };
        }

        function view() {
          return v(
            'div',
            null,
            'Hello World!',
            v(
              'div',
              {
        id: 'div1',
                'data-idx': 1,
              },
              'first',
            ),
            v(
              'div',
              {
        id: 'div2',
              },
              'second',
            ),
          );
        }

        function setProps(element, props) {
          for (const k in props) {
            if (props.hasOwnProperty(k)) {
              element.setAttribute(k, props[k]);
            }
          }
        }

        function createElement(vdom) {
          const t = typeof vdom;
          if (t === 'string' || t === 'number') {
            return document.createTextNode(vdom);
          }

          const { tag, props, children } = vdom;

          const element = document.createElement(tag);
          setProps(element, props);
          children.map(createElement).forEach(element.appendChild.bind(element));
          return element;
        }

        function render(vdom, container) {
          container.append(createElement(vdom));
        }

        // 执行render
        render(view(), document.querySelector('#app'));
    </script>
</body>

</html>